﻿<UserControl 
    x:Class="Tequila.AugmentedReality.CompassControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:AugmentedReality="clr-namespace:Tequila.AugmentedReality"
    xmlns:Views="clr-namespace:Tequila.AugmentedReality.Views"
    xmlns:Data="clr-namespace:System.Windows.Data;assembly=Tequila.Phone.System.Extensions" mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Height="112" 
    Width="112">
    <UserControl.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="#ffffff"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Segoe WP Bold"/>
        </Style>

        <Data:BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </UserControl.Resources>
    <Grid 
        x:Name="LayoutRoot"
        Background="Transparent">
        <ItemsControl x:Name="PoiContainer"
                      Canvas.ZIndex="100"
                      Width="112"
                      Height="112">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>                
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Views:CompassPoiView IsInFov="{Binding IsInFov}"
                                                     Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}">
                        <Views:CompassPoiView.RenderTransform>
                            <TranslateTransform X="{Binding X}"
                                                Y="{Binding Y}"/>
                        </Views:CompassPoiView.RenderTransform>
                    </Views:CompassPoiView>
                </DataTemplate>
            </ItemsControl.ItemTemplate>            
        </ItemsControl>       
        <Grid>
            <Grid.RenderTransform>
                <RotateTransform
                    x:Name="GeoDirectionsRotation"
                    Angle="0"
                    CenterX="56"
                    CenterY="56"/>
            </Grid.RenderTransform>
            <TextBlock
                Text="W"
                VerticalAlignment="Center"
                HorizontalAlignment="Left"/>
            <TextBlock
                Text="S"
                Width="10"
                Margin="2,98,0,0"/>
            <TextBlock
                Text="E"
                VerticalAlignment="Center"
                Width="10"
                Margin="95,0,0,0"/>
            <TextBlock
                Text="N"
                VerticalAlignment="Top"
                HorizontalAlignment="Center"/>
        </Grid>
        <Ellipse 
            x:Name="VisibleSurface"
            Height="84"
            Width="84"
            Fill="#58707f"/>
        <Path 
            Opacity="0.5"
            Fill="#9ba9b2"
            Stroke="#9ba9b2"
            StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="56 56">
                        <LineSegment Point="34.8 22.1"/>
                        <ArcSegment
                                Size="8 1"
                                SweepDirection="Clockwise"
                                Point="77.2 22.1">
                        </ArcSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Ellipse 
            Height="84"
            Width="84"
            StrokeThickness="5"
            Stroke="#58707f"/>
        <Ellipse 
            Height="80"
            Width="80"
            StrokeThickness="2"
            Stroke="#ffffff"/>
        <Ellipse
            Stroke="#ffffff"
            StrokeThickness="2"
            Width="24"
            Height="24"/>
        <Ellipse
            Fill="#ffffff"
            Width="4"
            Height="4"/>
    </Grid>
</UserControl>
